// @flow
import React, { Component, Fragment } from 'react';
import SocialLoginButton from 'components/Login/SocialLoginButton';
import { MdCheck as CheckIcon } from 'react-icons/md';
import Responsive from 'components/Base/Responsive';
import Spinner from 'components/Base/Spinner';
import cx from 'classnames';

import './LoginForm.scss';

type Props = {
    onChange(e: Event): void,
    onSendVerification(): Promise<*>,
    onEnterKeyPress(e: KeyboardEvent): void,
    onSocialLogin(provider: string): Promise<*>,
    email: string,
    sentEmail: boolean,
    sending: boolean,
    isUser: boolean
};

const LoginForm = ({
    onChange,
    onSendVerification,
    onEnterKeyPress,
    email,
    sentEmail,
    sending,
    isUser,
    onSocialLogin
}: Props) => {
    return (
        <div className="login-form">
            {sentEmail ? (
                <div className="sent-email">
                    <CheckIcon />
                    <div className="text">
                        {isUser ? '登录' : '注册会员'} 的电邮链接已经发送出去.<br />
                        请通过电邮链接来 {isUser ? '登录' : '注册会员'}.
                    </div>
                </div>
            ) : (
                <div className={cx('input-with-button', { sending })}>
                    <input
                        type="text"
                        placeholder="请输入电子邮箱地址"
                        value={email}
                        onChange={onChange}
                        disabled={sending}
                        onKeyPress={onEnterKeyPress}
                    />
                    <div className="button" onClick={onSendVerification}>
                        {sending ? <Spinner size="3rem" /> : '现在开始'}
                    </div>
                </div>
            )}
            <div className="separator">
                <div className="or">OR</div>
            </div>
            {/* <div className="social-buttons"> */}
            <SocialLoginButton provider="weibo" onSocialLogin={onSocialLogin} />
            <SocialLoginButton provider="github" onSocialLogin={onSocialLogin} />
            <SocialLoginButton provider="google" onSocialLogin={onSocialLogin} />
            {/* </div> */}
        </div>
    );
};

export default LoginForm;
